<template>
  <view>
	  <view class="box">
		 <view class="tupian">
			 <!--轮播图-->
			  <graceSwiper class="rotationChart" swiperId="garce-swiper-1" :swiperHeight="290" :items="swiperItems" >	
			   <image ></image>
			  </graceSwiper>
		  </view>  
		  <view>
			  <view class="img">
				   <image class="liulan" src="../../static/baranner/liulan.png"></image>
			  </view>
			  <view class="gowater">快捷送水</view>
		  </view>
		
		  
		
		<form @submit="formSubmit" class="commit">
			<view>
				<view class="ttt">
                <view class="grace-items grace-ite">
                        <view class="grace-form-r  ">
                            <picker class="pickers" @change="bindPickerChange" :value="genderIndex" :range="gender" name="gender">
                                <text class="chan" >{{gender[genderIndex]}}</text>
                            </picker>
                        </view>
                </view>
				</view>
				<view class="grace-items grace-itee">
				    <input type="text"  name="name" placeholder="请输入数量" v-model="shuliang" ></input>   
				</view>   
			</view>	
                <view class="grace-items grace-qi">
					<view class="grace-label grace-labels">请选择日期</view>
                        <view class="grace-form-r">
                            <picker @change="bindDateChange" :value="dateValue" mode="date" name="bd" start="2018-01-01" end="2019-01-01">
                                <text class="chan">{{dateValue}}</text>
                            </picker>
                        </view>
                </view>
               <view class="grace-items grace-dizhi">
               	<view class="grace-label grace-labelsss">请选择居住城市</view>
               	<view @click="cityPicker1" class="grace-form-r grace-from-right">
               		{{cityText1}}
               		<text class="grace-iconfont icon-arrow-right"></text>
               	</view>
               </view>
                      <view>
                    	<button formType="submit" class="quen" @tap="gotosong()">确认</button>
                    </view> 		
                </form>
				<!-- 地图组件调用 -->
            <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker1" :pickerValueDefault="cityPickerValueDefault1" @onCancel="onCancel1" @onConfirm="onConfirm1"></mpvue-city-picker>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker2" :pickerValueDefault="cityPickerValueDefault2" @onCancel="onCancel2" @onConfirm="onConfirm2"></mpvue-city-picker>

		  <view class="remen">
			  <view class="biaoti">
				  <i class="iconfont xing">&#xe601;</i>
				  <view class="reshang">热门活动</view>
			  </view>
			  <!-- 活动说明-->
			  
			  <view class="warptu" >
				   <view class="tulist" v-for="(item,index) in fail" :key="index">
				  		<view class="retu" >
							<view class="huodong">{{item.title}}</view>
							<view class="shuoming">{{item.content}}</view>
							<image class="huotu" :src="'../../static/'+item.defaultUrl"></image>
						</view>		
					  <!-- <view class="retu rtu">
						  	<view class="huodong">{{item.title}}</view>
						  	<view class="shuoming">{{item.content}}</view>
						  	<image class="huotu" src="../../static/tu1.png"></image>
						</view>
						<view class="retu rtu1">
						  	<view class="huodong">活动三</view>
						  	<view class="shuoming"> 活动说明</view>
						  	<image class="huotu" src="../../static/tu1.png"></image>
						</view>		
						<view class="retu rtu2">
						  	<view class="huodong">活动三</view>
						  	<view class="shuoming"> 活动说明</view>
						  	<image class="huotu" src="../../static/tu1.png"></image>
						</view>		 -->								
				  </view>
			  </view>
		  </view>
		   <!-- 热门商品-->
		  <view class="rehuodong">
		      <view class="biaoti">
		  			<i class="iconfont xing">&#xe601;</i>
		  			<view class="reshang">热门商品</view>
		      </view>	
					<!-- 列表一 -->
		  	 <view class="shanglist" @tap="xuanzepinpai()" >
					<view class="warpshang">
						<view class="shang1" v-for="(item,index) in shang" :key="index">
							<!-- <image class="shoutu" :src="item.goodsImgList[0].url"></image>
							<view class="wenzi">
								<view class="wenzi1">
									<i class="iconfont xing xing1">&#xe601;</i>
									<view class="yuan1">原产地直产，品牌直卖</view>
								</view>
		                         <view class="lao">{{item.goodsName}}</view>
								 <view class="lao">{{item.goodsName}}</view>
								 <view class="lao shui1">{{item.goodsSellpoint}}</view>
								 <view class="jiaqian">
									 <i class="iconfont qian">&#xe604;18</i>
									 <i class="heng1"></i>
									 <view class="jia">单价:{{item.goodsPrice}}</view>
								 </view>
								 <view class="ziying">
									 <i class="iconfont zi">&#xe60a;</i>
									 <view class="pingjhia1">{{item.feedback}}</view>
								 </view>
								 <view class="dixian"></view>
							</view> -->
							<view class="mes">
								<img :src="item.goodsImgList[0].url" alt="">
								<view class="right">
									<p class="p2">{{item.goodsName}}</p>
									<p class="p3">{{item.goodsSellpoint}}</p>
									<p class="p4">￥{{item.goodsPrice}}</p>
									<!-- <span class="span1">单件￥20</span> -->
									<P class="p5">{{item.goodsBrandName}}</P>
									<span class="span2">{{item.goodsCommentnum}}条评价 {{item.feedback}}好评</span>
								</view>
							</view>
							
						</view>
						
					</view>	
				</view>				  
		   </view>
	  </view>
	</view> 
	</view>
	
</template>

<script>
	import graceSwiper from "../../static/graceUI/components/graceSwiper.vue";
    import mpvuePicker from './mpvuePicker.vue';
    import mpvueCityPicker from './mpvueCityPicker.vue';
	export default {

		data() {
		  return {
			  //轮播数据 
			swiperItems:[
				{ imgUrl: '', path : ""}
			],
			genderIndex: 0,
            gender : [ '请选择品牌', '崂山', '娃哈哈','蛇草水','农夫山泉'],
			dateValue : "00:00",
			//地址选择
			themeColor: '#007AFF', //颜色
			cityText1 : "点击选择", //文本
			cityPickerValueDefault1 : [0,0,1], //默认选项
			cityText2 : "点击选择",
			cityPickerValueDefault2 : [0,0,1],
			//记录全部信息用于表单提交
			city1 : null,
			city2 : null,
			fail:'',
			shang:[],
			lunbo:''
			}
		},
		
	
	components:{
		graceSwiper,
	    mpvuePicker,
	    mpvueCityPicker
	},	
		methods: {
			//动态轮播图
			LoadBanner:function(){
				let _this = this;
				uni.request({
					url:"https://www.zunyishengshui.com/maishui/banner/selectBanner",
					method:"POST",
					header:{
						"content-type":"application/x-www-form-urlencoded"
					},
					success:function(res){
						_this.swiperItems = res.data.extend.bannerList
						for(var i = 0;i<_this.swiperItems.length;i++){
							_this.swiperItems[i].imgUrl = _this.swiperItems[i].bannerUrl 
						}
						console.log(_this.swiperItems)
					}
				})
				
				//动态获取轮播图
// 				uni.request({
// 					url: 'https://www.zunyishengshui.com/maishui/banner/selectBanner',
// 					method:'POST',
// 					header:{
// 						'content-type': 'application/x-www-form-urlencoded', 
// 					},
// 					success: (res) => {
// 				         console.log("轮播图加载测试");
// 						 //var funbannder=JSON.stringify(res.data.extend);
// 						//console.log(funbannder);
// 						//this.swiperItems = funbannder;
// 				        /* console.log(this.lunbo)  swiperItems*/
// 						this.text = 'request success';
// 						
// 					},fail:(res)=>{
// 						console.log(res);
// 					}
// 				})
			},
           /* gotosong(){
				uni.navigateTo({
					url:"../../components/waterconfirmes/warterconfirm"
				})	
				
			},
			xuanzepinpai(){
 				uni.navigateTo({
 					url:"index01"
 				}) 
			}, */
			
	    bindPickerChange:function(e){
            console.log(e);
            this.genderIndex = e.detail.value;
        },
        bindDateChange : function(e){
			console.log(e)
            this.dateValue = e.detail.value;
        },
		//获取地址
		cityPicker1 : function(){
			this.$refs.mpvueCityPicker1.show();
		},
		onConfirm1(e) {
			var cityText1  = e.label;
			var cityValue1 = e.value;
			var cityCode1  = e.cityCode;
			console.log(cityText1, cityValue1, cityCode1);
			this.cityText1 = cityText1;
			this.cityPickerValueDefault1 = cityValue1;
			this.city1 = e;
		},
		cityPicker2 : function(){
			this.$refs.mpvueCityPicker2.show();
		},
		onConfirm2(e) {
			var cityText2  = e.label;
			var cityValue2 = e.value;
			var cityCode2  = e.cityCode;
			console.log(cityText2, cityValue2, cityCode2);
			this.cityText2 = cityText2;
			this.cityPickerValueDefault2 = cityValue2;
			this.city2 = e;
		},
		//表单提交
		formSubmit : function(){
			//表单验证
			if(this.city1 == null || this.city2 == null){
				uni.showToast({title : "请选择城市", icon:"none"});
				return ;
			}
			//获取城市信息 保存完整的城市信息 {lable - 文字 , value - 数组index记录, cityCode : 城市编号}
			//请根据实际需求选择要使用的数据
			console.log(JSON.stringify(this.city1));
			console.log(JSON.stringify(this.city2));
			uni.showToast({title : "请观看控制台", icon:"none"});
		}
	},
	onLoad() {
		console.log("onload");
		this.LoadBanner();
		
		//动态获取商品列表
 		  uni.request({
 			url: 'https://www.zunyishengshui.com/maishui/Activity/selectAllActivity', 
 			method:'POST',
			data: {
 				selectAllActivity:'',
 			},
 			header:{
 				'content-type': 'application/x-www-form-urlencoded', 
 			},
 			success: (res) => {
 				this.fail = res.data.data;
 				for(var i = 0;i< this.fail.length;i++){
 					this.fail[i].defaultUrl = this.fail[i].defaultUrl.substr(15)
 				}
 				this.success = res.data;
 				console.log(this.fail);
 				this.text = 'request success';	
 			}
 		})
 	   //查询所有商品
 	   uni.request({
 	   	url: 'https://www.zunyishengshui.com/maishui/goods/selectAllGoods', 
 	   	method:'POST',
 	   	data: {
 	   		
 	   	},
 	   	header:{
 	   		'content-type': 'application/x-www-form-urlencoded', 
 	   	},
 	   	success: (res) => {
 	   		this.shang  = res.data.data;
 		    this.shang = this.shang.slice(0,4)
 	   		console.log(this.shang)
 	   		this.text = 'request success';   		
    	   }
	   })

	}	
		
		
		
		
		
		
		
	}
	
	
	
	
	
</script>

<style>
	.grace-top5{
		padding-top: 60upx;
	}
 .box{
	 width: 100%;
	 height: 499upx;
	 display: flex;
	 flex-direction: column;
 }
 .tupian{
	 width: 100%;
	 height: 376upx;
	 margin: 5upx 0upx 0upx 10upx;
 }
 .tu1{
	 width: 96%;
	 height: 376upx;
 }
 .shangpin{
	padding-top: 4upx;
	width: 100%;
	height: 80upx;
	border-bottom: 2upx solid #EEEEEE ;
 }
 .pin{
	 float: left;
	 line-height: 80upx;
	 color: #999999 ;
 }
 .shui{
	 margin-left: 38upx;
 }
 .pai{
	 margin-left: 12upx;
	 font-size: 14px;
 }
 .tong{
	 float: right;
	 margin-right: 236upx;
 }
 .shi{
	 float: right;
	 padding-right: 110upx;
 }
 .didi{
	 float: right;
	 font-size: 12px;
     padding-right: 34upx;	
 }
 .quen{
	 width: 680upx;
	 height: 80upx;
	 background: #3B9CDB;
	 color: #FFFFFF;
	 font-size: 14px;
	 line-height: 80upx;
	 margin: 20upx 34upx 26upx 34upx;
 }
 .remen{
	 width: 750upx;
	 height: 410upx;
 }
 .biaoti{
	 padding-top: 32upx;
	 padding-left: 274upx;
 }
 .xing{
	 top: 12upx;
	 float: left;
	 color: #3B9CDB;
 }
 .reshang{
	 float: left;
	 margin-left: 12upx;
	 color: #3B9CDB;
	 font-size: 18px;
 }
 .warptu{
	 width: 750upx;
	 /* height: 380upx; */
	 display: flex;
	 
	 
 }
 .tulist{
	 position: relative;
	 width: 100%;
 }
 .retu{
	 /* position: absolute;
	 left: 30upx;
	 top: 70upx; */
	 margin-left: 30upx;
	 width: 330upx;
	 height: 118upx;
	 background: #EBF0F2;
	 border-radius: 5px;
 }
 .huodong{
	 font-size: 14px;
	 margin-top: 10upx;
	 margin-left: 28upx;
 }
 .shuoming{
	 font-size: 12px;
	 color: #607D8B;
	 margin-top: 12upx;
	 margin-left: 28upx;
 }
 .huotu{
	 width: 104upx;
	 height: 104upx;
	 position: absolute;
	 top: 8upx;
	 left: 220upx;
	 border-radius: 50%;
 }
 .rtu{
	 /* position: absolute;
	 top: 70upx;
	 left: 386upx; */
 }
 .rtu1{
	/* position: absolute;
	 top: 250upx;
	 left: 30upx; */
 }
 .rtu2{
/* 	 position: absolute;
	 top: 253upx;
	 left: 387upx; */
 }
 .rehuodong{
	 width:750upx;
	 height: 708upx;
 }
 .shoutu{
	 width: 216upx;
	 height: 218upx;
	 float: left;
 }
 .wenzi{
	float: left;
	width: 70%;
 }
 .shanglist{
	 width: 720upx;
	 height: 240upx;
	 margin: 45upx 8upx 8upx 22upx;
 }
 .xing1{
	 width: 50upx;
	 height: 24upx;
	 padding-left: 46upx;
 }
.yuan1{
	font-size: 12px;
	color: #BBBBBB;
}
.lao{
	font-size: 15px;
	margin-left: 46upx;
}
.shui1{
	font-size: 12px;
	color: #BBBBBB;
	margin-left: 46upx;
}
.jiaqian{
	width: 220upx;
	height: 56upx;
}
.qian{
	color: #3B9CDB;
	margin-left: 46upx;
	float: left;
	font-size: 15px;
}
.jia{
	font-size: 11px;
	color: #BBBBBB;
	float: left;
	line-height: 46upx;
}
.heng1{
	float: left;
	width: 2upx;
	height: 20upx;
	background: #ABABAB;
	margin-top: 14upx;
}
.ziying{
	width: 420upx;
	height: 32upx;
}
.zi{
	float: left;
	color: #3B9CDB;
	font-size: 11px;
	background: #FFFFFF;
	margin-left: 46upx;
}
.pingjhia1{
	float: left;
	font-size: 11px;
	color: #ABABAB;
	margin-left: 8upx;
}
 .dixian{
	 width: 440upx;
	 height: 2upx;
	 background: #ABABAB;
	 margin-left: 46upx;
 }
 .shanglset1{
	margin: 0px 8upx 8upx 22upx;
 }
 
 /* 轮播图*/
 .grace-swiper{
	 width: 97%;
	 height: 376upx;
 }
 
  .gowater{
 	/* 快捷送水 */
 	 color: #3B9CDB ;
 	 font-weight: 700;
 	 font-size:18px ;
 	 display: flex;
 	 justify-content: center;/*水平居中*/
 	 text-align: center;
 	 margin-top: 20upx;
 	 margin-bottom: 40upx;
 }
 .grace-form-r{
	 width: 35%;
	 float: left;
 } 
 .grace-label{
	 width: 30%;
	 color:#999999;
	 font-size: 14px;
	/* float: left; */
	 height: 88upx;
	 line-height: 88upx;
 }
 .grace-items{
	 height: 88upx;
	 width: 50%;
 }
 .grace-labels{
	 width: 40%;
	 color:#999999;
	 font-size: 14px;
	 
	 height: 88upx;
	 line-height: 88upx;
 }
 .addreses{
	 float: right;
 }
 .commit{
	 width: 95%;
	 margin-left: 15upx;
 }
 .grace-ite{
	 float: left;
	
	 }
 .grace-itee{
	 float: left;
	 line-height: 96upx;
	 height: 96upx;
 }
 .ttt{
	 position: relative;
 }
 .grace-qi{
	 width: 100%;
 }
 .grace-didi{
	 width: 40%;
	 height: 150upx;
 }
 .grace-di{
	 width: 100%;
 }
.grace-form-r {
  
}
.grace-dddd{
	
	height: 88upx;
}
 .grace-dd{
	 position: absolute;
	 right: 145upx;
	 z-index: 100;
 }
 .grace-ddidi{
	 float: left;
 }
 .gr-wrap{
	 position: relative;
 }
.chan{
	color: #999999 ;
}
.grace-from-right{
	width: 40%;
	float: right;
}
.grace-dizhi{
	width: 90%;
}
.grace-labelsss{
	width: 30%;
	
}
.liulan{
	width: 44upx;
	height: 44upx;
	position: absolute;
	left:260upx ;
	top: 25upx;
}
.img{
	position: relative;
}
.pickers{
	width: 110%;
}









 
 
/* 地址图 */ 
.picker{
	 background:#00B26A;
	  width:100%; 
	  line-height:40px;
	  }


/* 活动列表 */
.mes{
		margin-left: 0.85rem;
		
		width: 100%;
		height: 8rem;
		border-bottom:1px solid #E0E0E0;
	}
	
	.mes .right{
		margin-left: 7rem;
		margin-top:-9rem;
		
	}
	.mes img{
		width: 5.8rem;
		height: 5.8rem;
		margin-top: 2rem;
	}
	
	.mes .right .p1{
		margin-top: -0.81rem;
		margin-left: 0.96rem;
		left: 3.06rem;
		top: 28.13rem;
		height: 1.19rem;
		line-height: 1.06rem;
		color: rgba(187, 187, 187, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p2{
	
		width: 18.88rem;
		height: 2.81rem;
		line-height: 1.38rem;
		color: rgba(16, 16, 16, 1);
		margin:auto;
		margin-top:2.8rem;
		font-size: 0.9rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p3{
		left: 1.44rem;
		top: 33.38rem;
		/* width: 7.56rem; */
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:-0.5rem;
	
	
	}
	.mes .right .p4{
	    left: 8.75rem;
		top: 12.69rem;
		/* width: 3.31rem; */
		height: 1.63rem;
		line-height: 1.63rem;
		color: rgba(59, 156, 219, 1);
		font-size: 1.1rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	}
	.mes .right .span1{
		left: 11.56rem;
		top: 9.81rem;
		/* width: 3.5rem; */
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 0.71rem;
		text-align: left;
		font-family: PingFangSC-regular;
		border-left: 1px soild #eee;
		float:left;
		margin-top:-1.25rem;
		margin-left:2.81rem;
		
	}
	.mes .right .p5{
		left: 0.64rem;
		top: 14.37rem;
		width: 1.68rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(59, 156, 219, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
		border:1px solid #3B9CDB;
	
	}
	.mes .right .span2{
		left: 11.31rem;
		top: 14.38rem;
		width: 9.44rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:-0.94rem;
		margin-left: 2.35rem;
		float: left;
	}


	
	
</style>
